<script setup>
import { onMounted,ref } from "vue";
import { useRoute,useRouter } from "vue-router";
import { getMstinfoById } from "@/apis/mstinfo/mstinfo";
const route = useRoute();
const router = useRouter();
// const mstinfoId = ref();
const mstinfoData = ref({})
const getMstinfoDataById = async () => {
  const res = await getMstinfoById(route.query.id);
  mstinfoData.value = res.data
  // console.log(mstinfoData.value.mstSel.mstSelImg)
};
// 目标:路由参数变化的时候 可以把分类数据接口重新发送
// onBeforeRouteUpdate(async(to) => {
//     // 存在问题：使用最新的路由参数请求最新的分类数据
//   console.log(to)
//   const res = await getMstinfoById(to.query.id);
//   mstinfoData.value = res.data
// })

const mstsellistClick = (id) => {
  router.push({
    path:'/mstsel',
    query:{
      id:id
    }
  })
}
const mstinfolistClick = (id) => {
  router.push({
    path:'/mstinfo',
    query:{
      id:id
    }
  })
}
onMounted(() => {
  getMstinfoDataById();
});
</script>

<template>
  <section class="page-header bg--cover bg-mstsel">
    <div class="container">
      <div class="page-header__content text-center">
        <h2 class="text-capitalize">面试题</h2>
        <nav style="--bs-breadcrumb-divider: '-'" aria-label="breadcrumb">
          <ol class="breadcrumb justify-content-center mb-0">
            <li class="breadcrumb-item"><a href="index.html">面试题</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ mstinfoData.mstInfoTitle }}</li>
          </ol>
        </nav>
      </div>
    </div>
  </section>

  <div class="blog padding-top padding-bottom">
    <div class="container">
      <div class="blog__wrapper">
        <div class="row">
          <div class="col-lg-8">
            <article>
              <div class="post-item-2">
                <div class="post-inner">
                  <div class="post-thumb mb-30 px-30 pt-30">
                    <div v-if="mstinfoData.mstSel">
                      <img
                      :src="mstinfoData.mstSel.mstSelImg"
                      alt="blog"
                    />
                    </div>
                    
                  </div>
                  <div class="post-content pt-0">   
                    <h3>{{ mstinfoData.mstInfoTitle }}</h3>
                    <div v-if="mstinfoData.mstDetail">
                      <div v-html="mstinfoData.mstDetail.mstDetailInfo"></div> 
                    </div>       
                    <blockquote class="single-quote mb-30">
                      <div class="quotes">
                        介绍:{{ mstinfoData.mstInfoDes }}
                      </div>
                    </blockquote>
                   
                  </div>
                </div>
              </div>

              <div id="comments" class="comments">
                <h4 class="comment-title h7">讨论</h4>
                <ul class="lab-ul comment-list">
                  <li class="comment" id="li-comment-1">
                    <div class="com-item">
                      <div class="com-thumb">
                        <img
                          alt=""
                          src="../../assets/images/blog/author/02.png"
                          srcset="../../assets/images/blog/author/02.png"
                          class="avatar avatar-90 photo"
                          height="90"
                          width="90"
                        />
                      </div>
                      <div class="com-content">
                        <div class="com-title">
                          <div class="com-title-meta">
                            <a href="#" class="h7">Alex Rock</a>
                            <span> October 5, 2022 at 12:41 pm </span>
                          </div>
                          <span class="reply">
                            <a
                              class="comment-reply-link"
                              href="#"
                              aria-label="Reply to Masum"
                              ><i class="fa-solid fa-reply-all"></i> Reply</a
                            >
                          </span>
                        </div>
                        <p>
                          Lorem ipsum dolor sit amet consectetur adipisicing
                          elit. Quam dolores deserunt dolorem facilis ullam
                          fugiat.
                        </p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <div id="respond" class="comment-respond">
                <h4 class="h7">留言</h4>
                <div class="add-comment">
                  <form
                    action="#"
                    method="post"
                    id="commentform"
                    class="comment-form"
                  >
                    <textarea
                      id="comment-reply"
                      name="comment"
                      rows="7"
                      placeholder="Type Here Your Comment*"
                    ></textarea>
                    <button type="submit" class="default-btn">
                      <span>Send Comment</span>
                    </button>
                  </form>
                </div>
              </div>
            </article>
          </div>
          <div class="col-lg-4">
            <aside class="ps-lg-4">
              <div class="widget widget-category">
                <div class="widget__header">
                  <h5>面试题列表</h5>
                </div>
                <ul class="lab-ul widget-wrapper list-bg-none">
                  <li v-for="item in mstinfoData.mstInfoList" :key="item.id"
                  @click="mstinfolistClick(item.id)">
                    <a  class="d-flex flex-wrap justify-content-between"
                      ><span> <i class="fa-solid fa-folder"></i> {{ item.mstInfoTitle }}</span
                      ></a
                    >
                  </li>
                </ul>
              </div>
              <div class="widget widget-post">
                <div class="widget__header">
                  <h5>题库列表</h5>
                </div>
                <ul class="lab-ul widget-wrapper">
                  <li class="widget-post-item" v-for="item in mstinfoData.mstSelList" :key="item.id"
                  @click="mstsellistClick(item.id)"
                  >
                    <div class="post-thumb">
                      <a 
                        ><img
                          :src="item.mstSelIcon"
                          alt="product"
                      /></a>
                    </div>
                    <div class="post-content">
                      <a >
                        <h6>{{ item.mstSelName }}</h6>
                      </a>
                      <p>02 January 2022</p>
                    </div>
                  </li>
                </ul>
              </div>
            </aside>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang='scss'>
.bg-mstsel {
  background-image: url("../../assets/images/banner/bg.jpg");
}
</style>